<template>
  <div class="footer">
    <div class="wrapper">
      <div class="service">
        <ul>
          <li>
            <span></span>
            <p>价格亲民</p>
          </li>
          <li>
            <span></span>
            <p>物流快捷</p>
          </li>
          <li>
            <span></span>
            <p>品质新鲜</p>
          </li>
          <li>
            <span></span>
            <p>售后无忧</p>
          </li>
        </ul>
      </div>
      <div class="copyright">
        <p>
          <i>关于我们</i>|<i>帮助中心</i>|<i href="#">售后服务</i
          >|<i>配送与验收</i>|<i>商务合作</i>|<i>搜索推荐</i>|<i>友情链接</i>
        </p>
        <p>邀奇二手平台</p>
      </div>
    </div>
  </div>
</template>
<style>
.footer {
  height: 580px;
  background-color: #f5f5f5;
}
.footer .service {
  padding: 60px 0;
  height: 180px;
  border-bottom: 1px solid #e8e8e8;
}
.footer .service ul {
  display: flex;
  justify-content: space-around;
}
.footer .service li {
  display: flex;
  line-height: 58px;
}
.footer .service span {
  display: block;
  margin-right: 20px;
  width: 58px;
  height: 58px;
  background-image: url(~@/assets/images/sprite.png);
}
.footer .service li:nth-child(2) span {
  background-position: 0 -58px;
}
.footer .service li:nth-child(3) span {
  background-position: 0 -116px;
}
.footer .service li:nth-child(4) span {
  background-position: 0 -174px;
}
.footer .service p {
  font-size: 28px;
}
.footer .help {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}
.icon-customer-service {
  margin-left: 3px;
  color: #00be9a;
}
.copyright {
  margin-top: 100px;
  text-align: center;
  color: #a1a1a1;
}
.copyright p {
  margin-bottom: 15px;
}
.copyright i {
  margin: 0 10px;
  color: #a1a1a1;
}
</style>
